<template>
  <div class="information">
    <router-link to="/modify/user_name" tag="div" class="item">
      <div class="attr">用户名</div>
      <div class="value iconfont">{{this.userMsg.user_name}} &#xe601;</div>
    </router-link>
    <router-link to="/modify/user_nickname" tag="div" class="item">
      <div class="attr">呢称</div>
      <div class="value iconfont">{{this.userMsg.user_nickname}} &#xe601;</div>
    </router-link>
    <router-link to="/modify/user_sex" tag="div" class="item">
      <div class="attr">性别</div>
      <div class="value iconfont">{{this.userMsg.user_sex}} &#xe601;</div>
    </router-link>
    <router-link to="/modify/user_address" tag="div" class="item">
      <div class="attr">所在城市</div>
      <div class="value iconfont">{{this.userMsg.user_address}} &#xe601;</div>
    </router-link>
    <router-link to="/modify/user_skill" tag="div" class="item">
      <div class="attr">技能</div>
      <div class="value iconfont">{{this.userMsg.user_skill}} &#xe601;</div>
    </router-link>
    <router-link to="/modify/user_password" tag="div" class="item">
      <div class="attr">密码</div>
      <div class="value iconfont">{{this.userMsg.user_password}} &#xe601;</div>
    </router-link>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import axios from "axios";

export default {
  name: "UserSynopsis",
  data() {
    return {
      userMsg: $cookies.get('userMsg')
    };
  },
  computed: {},
  methods: {
    // getUserMsg(attr) {
    //   axios.get("/api/getusermsg.json").then(this.getUserMsgSucc);
    // },
    // getUserMsgSucc(res) {
    //   // console.log(res);
    //   if (res.status == 200 && res.data) {
    //     this.userMsg = res.data;
    //   }
    // }
  },
  mounted() {
    // this.getUserMsg();
  }
};
</script>
<style lang="scss" scoped>
@import "~styles/varibles.styl";

.information {
  position: relative;
  width: 100vw;
  background-image: linear-gradient(to bottom right, #44ddff, #44ddff);
  overflow: hidden;
  .item {
    position: relative;
    width: 100vw;
    padding: 4vw;
    border-bottom: 0.01rem solid #dddddd;
    .attr {
      display: inline-block;
      height: 10vw;
      line-height: 10vw;
      font-size: 0.3rem;
    }
    .value {
      position: absolute;
      right: 14vw;
      display: inline-block;
      height: 10vw;
      line-height: 10vw;
      color: #6f6f6f;
      max-width: 50vw;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
